<template>
  <div>
    <span>全选:</span>
    <!-- v-model 关联全选 选中状态 -->
    <input type="checkbox" v-model="isAll" />
    <button @click="btn">反选</button>
    <ul>
      <li v-for="item in arr" :key="item.name">
        <!-- 3.对象。c 关联选中状态 -->
        <input type="checkbox" v-model="item.c" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: '猪八戒',
          c: false,
        },
        {
          name: '孙悟空',
          c: false,
        },
        {
          name: '唐僧',
          c: false,
        },
        {
          name: '白龙马',
          c: false,
        },
      ],
    }
  },
  computed: {
    // isAll: {
    //   //全选框影响小选框
    //   set(val) {
    //     //参数传的是true/false
    //     //小选框v-model，关联数组里对象的c属性
    //     //isall计算属性的set方法，拿到全选框状态
    //     //状态值赋值给，数组里面每个对象的c属性
    //     //拿到全选框的选中状态（true/false）
    //   return  this.arr.forEach((item) => (item.c = val))
    //   },
    //   //小选框影响全选框
    //   get() {
    //     //every口诀：查找数组里‘不符合’条件，直接原地返回false
    //     return this.arr.every((item) => item.c === true)
    //   },
    // },
    isAll: {
      // get() {
      //   //retrun 出来的是一个true
      //   return this.arr.every(item=>item.c=== true)
      // },
      // //在在这个计算属性被改变的时候会调用set
      // //value是计算属性即将改变的值
      // set(value){
      //   return this.arr.forEach(item=>item.c=value)
      //     }
      get() {
        return this.arr.every((item) => item.c === true)
      },
      set(value){
        this.arr.forEach(item=>item.c=value)
      }
    },
  },
  methods: {
    btn() {
      this.arr.forEach((item) => (item.c = !item.c))
    },
  },
}
</script>

<style scoped></style>
